<template>
  <div :id="id" ref="chart" style="width: 100%; height: 260px"></div>
</template>
<script>
// 引入echarts
import * as echarts from "echarts";
import { onMounted } from "vue";
import { reactive, ref, toRefs } from "vue";
import {
  UsergroupAddOutlined,
  PartitionOutlined,
  HistoryOutlined,
} from "@ant-design/icons-vue";

export default {
  name: "lineChart",
  props: {
    id: {
      type: String,
      default: "id",
    },
    chartTitle: {
      type: String,
      default: "标题",
    },
    vs: {
      type: Array,
      default: [0],
    },
  },
  components: {
    UsergroupAddOutlined,
    PartitionOutlined,
    HistoryOutlined,
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      const chart = echarts.init(document.getElementById(this.id));
      const option = {
        title: {
          text: this.chartTitle,
        },
        series: [
          {
            type: "gauge",
            axisLine: {
              lineStyle: {
                // 表盘
                width: 18,
                color: [
                  [0.3, "#67e0e3"],
                  [0.7, "#37a2da"],
                  [1, "#fd666d"],
                ],
              },
            },
            pointer: {
              itemStyle: {
                color: "auto",
              },
            },
            axisTick: {
              // 盘上的小齿轮
              distance: -20,
              length: 8,
              lineStyle: {
                color: "#fff",
                width: 1,
              },
            },
            splitLine: {
              distance: -30,
              length: 30,
              lineStyle: {
                color: "#fff",
                width: 4,
              },
            },
            axisLabel: {
              // 仪表盘上的数字
              color: "inherit",
              distance: 25,
              fontSize: 10,
            },
            detail: {
              // 最底下的数据
              valueAnimation: true, // 动效
              formatter: "{value} kWh",
              color: "inherit",
              distance: 50,
              fontSize: 15,
            },
            data: [
              {
                value: this.vs[this.vs.length - 1].toFixed(2),
              },
            ],
          },
        ],
        animation: false,
      };
      //指定配置项与数据显示
      chart.setOption(option);
    },
  },
};
</script>
<style>
</style>